<template>
  <div class="photoInfoC">
    <h4 class="title">{{photoinfo.title}}</h4>

    <p class="info">
      <span>{{photoinfo.add_time}}</span>
      <span>点击:{{photoinfo.click}}</span>
    </p>
    <hr />

    <!-- 缩略图 -->
    <div>
    <!-- <div style="height: 1000px; background-color: pink;"></div> -->
    <vue-preview
      :list="imgs"
      :thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
      :previewBoxStyle="{border: '1px solid #eee'}"
      :tapToClose="true"
      @close="closeHandler"
      @destroy="destroyHandler"
    />
  </div>

    <div class="content" v-html="photoinfo.content"></div>

    <comment :id="id"></comment>
  </div>
</template>

<script>
import comment from "../sub-compoents/Comment.vue";
export default {
  data() {
    return {
      photoinfo: [],
      imgs:[]
    };
  },
  created() {
    this.getPotoInfo();
    this.getImgs();
  },
  methods: {
    async getPotoInfo() {
      const { data } = await this.$http.get("/api/getimageInfo/" + this.id);
      if (data.status === 0) {
        //console.log(data);
        return (this.photoinfo = data.message[0]);
      }
    },
    async getImgs(){
        const { data } = await this.$http.get("/api/getthumimages/" + this.id);
        if (data.status === 0) {
            data.message.forEach(element => {
                element.w=600;
                element.h=600;
            });
        //console.log(data);
        return (this.imgs = data.message);
      }
    },
    // 即将关闭的时候，调用这个处理函数
    closeHandler() {
      console.log('closeHandler')
    },
    // 完全关闭之后，调用这个函数清理资源
    destroyHandler() {
      console.log('destroyHandler')
    }
  },
  props: ["id"],
  components: {
    comment
  }
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 15px;
  text-align: center;
  margin: 10px 0;
  color: blue;
}
.info {
  font-size: 8px;
  display: flex;
  justify-content: space-between;
}
.photoInfoC {
  margin: 5px;
}
.content {
  font-size: 12px;
  line-height: 25px;
}
</style>